@W-20474693 - [WebauthN] Passkey Registration by yunakim714 · Pull Request #3571 · SalesforceCommerceCloud/pwa-kit

yunakim714 · 2026-01-09T21:13:11Z

Description

This PR implements the passkey registration functionality.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

How Passkey Registration works:

When a shopper logs in or creates an account successfully, they are prompted with a Create Passkey toast on the secure account page. This should work successfully regardless of where the shopper logs in. Shoppers can log in from:
a. AuthModal
b. Login page
c. ~~Checkout page~~
d. Register page (when creating an account)
Clicking Create Passkey prompts the shopper to enter an optional nickname for their passkey.
Clicking Register Passkey sends a POST to request an OTP (calls the authorizeWebauthnRegistration AuthHelper in commerce-sdk-react
Shopper is prompted to enter the 8 digit OTP
... (Next steps will be implemented in follow up ticket)
a. W-20474693 - [PWA Kit][WebAuthn][Passkey Registration] Implement Passkey nickname creation and authorization

How to Test-Drive This PR

To test e2e:

Navigate to https://wasatch-mrt-yuna.mrt-storefront-staging.com/
Log in via the following storefront pages/components and verify that the Create Passkey toast is prompted on successful login / account creation
- AuthModal - login & registration
- Login page
- Register page (when creating an account)
When you click Create Passkey after inputting a passkey name, you should see a successful POST to the webhook URL like so:

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

cc-prodsec · 2026-01-09T21:13:21Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

yunakim714 · 2026-01-13T16:25:54Z

packages/template-retail-react-app/app/components/otp-auth/index.jsx

@@ -0,0 +1,348 @@
+/*


otp-auth files have been pulled from the One click checkout feature branch. This PR reuses the OtpAuth modal created by the 1CC team.

yunakim714 · 2026-01-13T20:02:24Z

packages/template-retail-react-app/app/pages/account/index.jsx

+        if (isRegistered && config?.app?.login?.passkey?.enabled) {
+            showToast()
+        }


Only show the Passkey Registration toast if the feature flag is enabled in the config file

yunakim714 · 2026-01-13T20:02:48Z

packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx

+            await authorizeWebauthnRegistration.mutateAsync({
+                user_id: customer.email,
+                mode: webauthnConfig.mode,
+                channel_id: commerceApiConfig.parameters.siteId,
+                ...(webauthnConfig.mode === 'callback' && {
+                    callback_uri: webauthnConfig.callbackURI
+                })
+            })


Call to the authorizeWebauthnRegistration AuthHelper

…ront

hajinsuha1 · 2026-01-15T16:54:26Z

packages/template-retail-react-app/translations/en-GB.json

  "auth_modal.info.welcome_user": {
    "defaultMessage": "Welcome {name},"
  },
+  "auth_modal.passkey.button.close.assistive_msg": {


@yunakim714 as we don't have a dedicated UX person for this epic, could you start a sheet to keep track of any of the new text we added so that we can get it reviewed by Spencer later?

Sure! I'll create a sheet for any new Webauthn text labels

Here is the spreadsheet with text label additions from this PR
https://docs.google.com/spreadsheets/d/1U4MGtzZw-xfW4J9uQFBQvMmO3pYAoEwsYXdK78p-CIY/edit?usp=sharing

packages/template-retail-react-app/app/components/otp-auth/index.jsx

packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx

packages/template-retail-react-app/app/pages/checkout/index.jsx

packages/template-retail-react-app/app/hooks/use-auth-modal.js

hajinsuha1 · 2026-01-16T16:05:14Z

packages/template-retail-react-app/app/hooks/use-auth-modal.js

        // We are done with the modal.
        onClose()

+        if ((loggingIn || registering) && customer.data && config?.app?.login?.passkey?.enabled) {


I'm finding that when registering using the auth-modal, it doesn't show the create passkey toast. It looks like its because customer.data is undefined right after registering.

Also I see this code block repeated a couple times. When a user logs in or registers they seem to always be redirected to the /accounts page (except during passwordless login with a redirect). Would we consider moving this logic to only be called in the accounts page?

I think we can ignore the passwordless case, because if a user is shopping and they want to quickly checkout we may not want to prompt to create a passkey.

Not sure if this is the desired behavior, but sometimes when I log in from the auth modal on the home page, I am not navigated to the account page.
Also, if we only added this code block on the account page - we would have to use a session item to identify when the user is navigated here from a successful login / account creation. I could switch to this approach if needed! For now, I resolved the bug where this doesn't show up when registering via auth modal

I'm testing out the login from auth and I also see sometimes it redirects to the accounts page and sometimes does not 🤔
Looking at the code, it seems like logging in from use-auth-modal should not redirect to the accounts page because onLoginSuccess() is noop. Wonder if this is a bug.
But with that said what you have makes sense.

hajinsuha1 · 2026-01-16T17:14:43Z

packages/template-retail-react-app/app/pages/login/index.jsx

+                    // Navigate after passkey check completes (whether toast is shown or not)
+                    navigate(redirectTo)
+                })
+                return


nit: could we remove the return and navigate(redirectTo) and let line 211 handle it?

… new release is available

packages/template-retail-react-app/app/hooks/use-auth-modal.js

packages/template-retail-react-app/app/pages/registration/index.jsx

Add code stubs from SPIKE

33732bd

yunakim714 changed the base branch from develop to feature/webauthn-login January 9, 2026 21:13

yunakim714 and others added 5 commits January 12, 2026 11:54

Call out to authorizeWebauthnRegistration auth helper

49d41c6

Merge branch 'feature/webauthn-login' into W-20474693-passkey-creation

016ac69

Show toast on account page if customer is registered

ba2e2e8

pull in OTP Auth modal changes from 1 click checkout feature branch

2d8e140

Add OTP auth modal

d626a93

yunakim714 commented Jan 13, 2026

View reviewed changes

Add test files

7a4b57c

yunakim714 commented Jan 13, 2026

View reviewed changes

yunakim714 marked this pull request as ready for review January 13, 2026 20:03

yunakim714 requested a review from a team as a code owner January 13, 2026 20:03

yunakim714 added 4 commits January 13, 2026 15:46

Only show Create Passkey toast if webauthn is browser compatible

028e560

Only show toast on successful login or account creation

9cab5e2

Show passkey toast on checkout page

319d109

Add close button to toast

240a7b8

yunakim714 requested review from hajinsuha1 and jeremy-jung1 January 14, 2026 22:22

yunakim714 added 2 commits January 15, 2026 10:07

Create passkey context so modal opens from anywhere within the storef…

13704ab

…ront

Add test file for provider:

6c8f205

hajinsuha1 reviewed Jan 15, 2026

View reviewed changes

packages/template-retail-react-app/app/components/otp-auth/index.jsx Show resolved Hide resolved

hajinsuha1 reviewed Jan 15, 2026

View reviewed changes

packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx Outdated Show resolved Hide resolved

hajinsuha1 reviewed Jan 15, 2026

View reviewed changes

packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx Outdated Show resolved Hide resolved

hajinsuha1 reviewed Jan 15, 2026

View reviewed changes

packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx Show resolved Hide resolved

hajinsuha1 reviewed Jan 15, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/index.jsx Outdated Show resolved Hide resolved

Localize text

152e35d

yunakim714 requested a review from alexvuong January 15, 2026 20:47

yunakim714 added 3 commits January 15, 2026 15:47

Localize text

dd47c53

Remove passkey creation from checkout

f80a2bd

Lint

a180a8b